@extends('admin.layout.layout')

@section('style')
    <style>
        .sortable-placeholder {
            margin: 5px 0px;
            border: 1px dashed #b4b9be;
        }

        .tree-level-1 {
            margin-left: 50px;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default" id="add-menu">
                <div class="panel-heading">
                    <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#menu-tree"
                           href="#collapse-add">
                            添加菜单
                        </a>
                    </h4>
                </div>
                <div id="collapse-add" class="panel-collapse collapse">
                    <div class="panel-body">
                        Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                        cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                        vice lomo.
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="panel-group" id="menu-tree">
                @foreach($menus as $menu)
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" data-parent="#menu-tree"
                                   href="#collapse-{{$menu->id}}">
                                    {{$menu->name}}
                                </a>
                            </h4>
                        </div>
                        <div id="collapse-{{$menu->id}}" class="panel-collapse collapse">
                            <div class="panel-body">
                                Nihil anim keffiyeh helvetica, craft beer labore wes anderson
                                cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
                                vice lomo.
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            {{$menus->links()}}
        </div>
    </div>
@endsection
@section('script')
    <script>
        $("#menu-tree").disableSelection().sortable({
            placeholder: "sortable-placeholder",
            forcePlaceholderSize: 1,
            cancel: "a,button",
            opacity: 0.5,
            sort: function (event, ui) {
                var level = getLevel(ui);
                ui.placeholder.css('margin-left', level * 50);
                console.log(ui.item.prev().attr('data-level'));
            },
            stop: function (event, ui) {
                var level = getLevel(ui);
                ui.item.css('margin-left', level * 50);
                ui.item.attr('data-level', level);
            }

        });

        function getLevel(ui) {
            var dataLevel = ui.item.attr('data-level')?ui.item.attr('data-level'):0;
            var level = Math.floor((ui.position.left - 15) / 50)+Number(dataLevel);
            if(level<0)
                level = 0;
            return level;
        }

        $("#test").sortable();

        $("#add-menu").draggable({
            connectToSortable: "#menu-tree",
            helper: "clone",
            revert: "invalid"
        });
    </script>
@endsection